<html>
<head>
    <link href="${ctx}/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <link href="${ctx}/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/css/index.css" rel="stylesheet">
    <link href="${ctx}/font-awesome/3.0.0/css/font-awesome.min.css" rel="stylesheet">
    <link href="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.css" rel="stylesheet">
    <script src="${ctx}/jquery/2.1.4/jquery.min.js"></script>
    <script src="${ctx}/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <script src="${ctx}/bootstrap-table/1.12.0/bootstrap-table.min.js"></script>
    <link href="${ctx}/select2/4.0.6-rc.1/css/select2.min.css" rel="stylesheet">
    <style>
        .btn {
            font-size: 12px;
        }

        .table th, .table td {
            text-align: center;
            vertical-align: middle !important;
        }

        .select-editable {
            position: relative;
            background-color: white;
            border: solid grey 1px;
            width: 120px;
            height: 18px;
        }

        .select-editable select {
            position: absolute;
            top: 0px;
            left: 0px;
            font-size: 14px;
            border: none;
            width: 120px;
            margin: 0;
        }

        .select-editable input {
            position: absolute;
            top: 0px;
            left: 0px;
            width: 100px;
            padding: 1px;
            font-size: 12px;
            border: none;
        }

        .select-editable select:focus, .select-editable input:focus {
            outline: none;
        }
    </style>
</head>
<body>
<div class="container-fluid">
    <div id="toolbar">
        <div class="input-group" style="float: left; width: 200px; margin: 0 15px 10px 0;">
            <span class="input-group-addon">手机号码</span>
            <input type="text" class="form-control" id="phone">
        </div>
        <div class="input-group" style="float: left; width: 200px;margin: 0 15px 10px 0;">
            <span class="input-group-addon">任务名称</span>
            <input type="text" class="form-control" id="title" value="<#if _title??>${_title}</#if>">
        </div>
        <div class="input-group" style="float: left; width: 200px; margin: 0 15px 10px 0;">
            <span class="input-group-addon">客户姓名</span>
            <input type="text" class="form-control" id="customer">
        </div>
        <div class="input-group" style="float: left; max-width: 380px; margin-bottom:10px;">
            <span class="input-group-addon">创建时间</span>
            <input type="date" class="form-control" style="position:relative; float:left; width:140px" id="startTime">
            <input type="date" class="form-control" style="position:relative; float:left; width:140px" id="endTime">
        </div>
        <div class="input-group" style="float: left; max-width: 200px; margin: 0 15px 10px 0;">
            <span class="input-group-addon">任务状态</span>
            <select id="status" class="form-control" style="">
                <option value="">全部</option>
            </select>
        </div>
        <div class="btn-group">
            <button id="search_btn" class="btn btn-info">立即查询</button>
        </div>

    </div>
    <table id="table"></table>
</div>

<script src="${ctx}/bootstrap-table/1.12.0/locale/bootstrap-table-zh-CN.min.js"></script>
<script src="${ctx}/bootstrap-table/1.12.0/extensions/export/bootstrap-table-export.min.js"></script>
<script src="${ctx}/select2/4.0.6-rc.1/js/select2.min.js"></script>
<script src="${ctx}/js/extends.js"></script>
<script>


    function queryParams(opt) {
        opt.phone = $("#phone").val();
        opt.title = $("#title").val();
        opt.stime = $("#startTime").val();
        opt.etime = $("#endTime").val();
        opt.status = $("#status").val();
        opt.customer = $("#customer").val();
        return opt;
    };

    var table = null;

    $(function () {
        table = $('#table');
        //加载表格
        table.bootstrapTable({
            url: '/apps/getFloatSwitch', //请求后台的URL（*）
            method: 'post', //请求方式（*）
            toolbar: '#toolbar', //工具按钮用哪个容器
            striped: true,
            dataType: "json",
            pagination: true,
            // "queryParamsType": "limit",
            singleSelect: false,
            contentType: "application/x-www-form-urlencoded",
            pageSize: 50,
            pageNumber: 1,
            search: false, //不显示 搜索框
            showColumns: false, //不显示下拉框（选择显示的列）
            sidePagination: "server", //服务端请求
            queryParams: queryParams,
            //minimunCountColumns: 2,
            pageList: [50, 100, 200, 500], //可供选择的每页的行数（*）
            //queryParams : oTableInit.queryParams,//传递参数（*）
            searchOnEnterKey: true,
            // search: true, //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
            strictSearch: true,
            //showColumns: true, //是否显示所有的列
            showRefresh: false, //是否显示刷新按钮
            minimumCountColumns: 2, //最少允许的列数
            clickToSelect: false, //是否启用点击选中行
            height: (document.body.clientHeight), //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
            uniqueId: "userId", //每一行的唯一标识，一般为主键列
            // showToggle: true, //是否显示详细视图和列表视图的切换按钮
            // cardView: false, //是否显示详细视图
            // detailView: false, //是否显示父子表
            // showExport: true, //是否显示导出
            exportDataType: "selected", //basic', 'all', 'selected'
            columns: [{
                checkbox: true
            }, {
                title: 'ID',
                width: '50px',
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                field: 'exhibition',
                title: '是否展示'
            }, {
                field: 'direction',
                title: '跳转方向',
            }, {
                field: 'url',
                title: '跳转地址',
            }, {
                field: 'picture',
                title: '跳转图片',
            }, {
                field: 'name',
                title: '名称',
            }, {
                field: 'uuid',
                title: '操作',
                formatter: function (value, row, index) {
                    var category = 'floatSwitch';
                    var btns = '<a class="check_btn" href="javascript:void(0);" onClick="edit(\'' + row.category + '\')">编辑</a>';
                    return btns;
                }
            }],
            responseHandler: function (res) {
                return {
                    "total": res.total, //总页数
                    "rows": res.rows //数据
                };
            }
        });

        // 查询
        $("#search_btn").click(function () {
            table.bootstrapTable('refreshOptions', {pageNumber: 1});
        });


    });
    // 编辑
    var edit = function (str) {
        window.parent.iw.dialog({
            size: 'vm',
            title: '编辑',
            href: '/apps/edits/?category=' + str,
            closing: function () {
                table.bootstrapTable('refresh');
            }
        });
    };
</script>

</body>

</html>
